<!--
 * @Author: your name
 * @Date: 2021-03-01 11:44:09
 * @LastEditTime: 2021-04-29 23:13:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jf-h5\src\page\detail\index.vue
-->
//详情显示页面
<template>
    <div class="container">
        <el-backtop :bottom="50">
            <div class="backtop">
                <i class="el-icon-caret-top"></i>
            </div>
        </el-backtop>
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
            <template slot="title">
                <van-notice-bar :text="$route.query.class_name" />
            </template>
        </van-nav-bar>
        <div
            v-if="$route.query.type == 'pdf' && filesList.length"
            class="pdf-container"
        >
            <!--  v-for="i in numPages"
        :key="i"
        :page="i" -->
            <pdf
                ref="pdf"
                :page="currentPage"
                :src="`${IMGPATH}${filesList[0].file_path}`"
            >
            </pdf>
            <div class="click-to">
                <van-button type="info" @click="agePage">上一页</van-button
                ><van-button type="info" class="next-to" @click="newPage"
                    >下一页</van-button
                >
            </div>
        </div>

        <div v-else class="img-container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div
                        v-for="(item, index) in filesList"
                        :key="item.id"
                        class="swiper-slide"
                    >
                        <van-image
                            :src="IMGPATH + item.file_path"
                            lazy-load
                            @click="imagePreview(filesList, index)"
                        >
                            <template v-slot:loading>
                                <van-loading
                                    size="30px"
                                    vertical
                                    type="spinner"
                                    color="#1989fa"
                                    >加载中...</van-loading
                                >
                            </template>
                        </van-image>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from "swiper";
import pdf from "vue-pdf";
export default {
    components: {
        pdf
    },
    data() {
        return {
            numPages: null, // pdf 总页数
            filesList: [],
            currentPage: 1 //当前页
        };
    },
    mounted() {
        this.getFiles();
    },
    methods: {
        imagePreview(imgs, index) {
            const imgArr = imgs.map(imgObj => this.IMGPATH + imgObj.file_path);
            this.ImagePreview({
                images: imgArr, // 预览图片的那个数组
                showIndex: true,
                loop: false,
                startPosition: index // 指明预览第几张图
            });
        },
        agePage() {
            this.currentPage <= 1
                ? this.$Toast.fail("当前是第一页")
                : this.currentPage--;
        },
        newPage() {
            this.numPages > this.currentPage
                ? this.currentPage++
                : this.$Toast.fail("当前是最后一页");
        },
        // 初始化swiper
        initSwiper() {
            new Swiper(".swiper-container", {
                /* freeMode: true,
                freeModeSticky: true, */
                pagination: {
                    el: ".swiper-pagination",
                    type: "fraction"
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                }
            });
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        // 计算pdf页码总数
        getNumPages() {
            let loadingTask = pdf.createLoadingTask(
                `${this.IMGPATH}${this.filesList[0].file_path}`
            );
            loadingTask.promise
                .then(({ _pdfInfo }) => {
                    this.numPages = _pdfInfo.numPages;
                })
                .catch(err => {
                    console.error("pdf 加载失败", err);
                });
        },
        // 获取文件数据
        async getFiles() {
            const { table_name, id } = this.$route.query;
            const {
                code,
                data: { results }
            } = await this.$api.menu.getMenuFiles({
                table_name: table_name + "_files",
                sid: id
            });
            if (!code) {
                this.filesList = results;
                switch (this.$route.query.type) {
                    case "pdf":
                        this.getNumPages();
                        break;
                    case "img":
                        this.$nextTick(() => {
                            this.initSwiper();
                        });
                        break;
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
@import "swiper/css/swiper.css";
/deep/.container {
    height: 100%;
    .van-notice-bar {
        color: black;
        background-color: #fff;
        width: 600px;
        .van-notice-bar__wrap {
            display: flex;
            justify-content: center;
            .van-notice-bar__content {
                font-size: 30px;
            }
        }
    }
    .click-to {
        display: flex;
        justify-content: center;
        .next-to {
            margin-left: 50px;
        }
    }
    .el-backtop {
        height: 70px;
        width: 70px;
        .backtop {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 70px;
            border-radius: 50%;
            color: #1989fa;
        }
    }
    .img-container {
        height: 100%;
        .swiper-container {
            width: 100%;
            height: 100%;
            .swiper-wrapper {
                /deep/ .swiper-slide {
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    .van-loading {
                        width: 100px;
                    }
                }
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .swiper-pagination {
                font-size: 30px;
                color: #666;
                span {
                    &.swiper-pagination-current {
                        font-size: 40px;
                    }
                }
            }
        }
    }

    padding-top: 100px;
    .van-nav-bar {
        width: 100%;
        height: 100px;
        position: fixed;
        top: 0;
        left: 0;
        .van-nav-bar__content {
            height: 100%;
            span,
            .van-nav-bar__title {
                font-size: 30px !important;
            }
            .van-nav-bar__title {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .pdf-container {
        width: 100%;
        height: 100%;
        /* position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0; */
        canvas {
            width: 100% !important;
        }
    }
}
</style>
